<template>
  <div class="maintain-analysis-container">
    <el-page-header content="维护效能分析" style="margin-bottom: 20px;"></el-page-header>

    <!-- 维护投入产出 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="stat-card">
          <div slot="header">
            <span>维护类型投入</span>
          </div>
          <div id="maintainBar" style="width: 100%; height: 280px;"></div>
          <div class="maintain-cost-desc">
            预防性: {{ maintainCost.prevent }} 万
            | 故障维修: {{ maintainCost.repair }} 万
            | 技改: {{ maintainCost.tech }} 万
          </div>


        </el-card>
      </el-col>

      <!-- 维护后故障复发率 -->
      <el-col :span="12">
        <el-card shadow="hover" class="stat-card">
          <div slot="header">
            <span>维护后故障复发率</span>
          </div>
          <div id="recurrenceLine" style="width: 100%; height: 280px;"></div>
          <div class="recurrence-desc">
            平均复发率: {{ recurrenceRateAvg }}%
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 维护资源热力图 -->
    <el-card shadow="hover" class="stat-card" style="margin-top: 20px;">
      <div slot="header">
        <span>维护资源热力图</span>
        <el-radio-group v-model="heatmapType" size="small" style="margin-left: 20px;">
          <el-radio-button label="工单密度"></el-radio-button>
          <el-radio-button label="人员负荷"></el-radio-button>
        </el-radio-group>
      </div>
      <div id="resourceHeatmap" style="width: 100%; height: 350px;"></div>
    </el-card>

    <!-- 维护策略优化模拟 -->
    <el-card shadow="hover" class="stat-card" style="margin-top: 20px;">
      <div slot="header">
        <span>维护策略优化模拟</span>
      </div>
      <el-form :model="strategyForm" label-width="120px" style="margin-top: 10px;">
        <el-form-item label="设备类型">
          <el-select v-model="strategyForm.deviceType" placeholder="请选择">
            <el-option label="变压器" value="transformer"></el-option>
            <el-option label="开关柜" value="switchgear"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护周期">
          <el-slider v-model="strategyForm.cycle" :min="1" :max="6" :step="1" show-tooltip></el-slider>
          <span>{{ strategyForm.cycle }}个月</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="simulateStrategy">模拟分析</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header">故障次数预测</div>
            <div id="faultPredict" style="width: 100%; height: 200px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header">维护成本预测</div>
            <div id="costPredict" style="width: 100%; height: 200px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { Message } from 'element-ui'

export default {
  name: 'MaintainEffectAnalysis',
  data() {
    return {
      maintainCost: {
        prevent: 320,
        repair: 480,
        tech: 250
      },
      recurrenceRateAvg: 12.5,
      heatmapType: '工单密度',
      strategyForm: {
        deviceType: 'transformer',
        cycle: 3
      },
      maintainBar: null,
      recurrenceLine: null,
      resourceHeatmap: null,
      faultPredict: null,
      costPredict: null
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 维护投入柱状图
      this.maintainBar = echarts.init(document.getElementById('maintainBar'))
      this.maintainBar.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['预防性维护', '故障维修', '技改']
        },
        yAxis: { type: 'value', name: '成本(万元)' },
        series: [
          {
            name: '维护成本',
            type: 'bar',
            data: [this.maintainCost.prevent, this.maintainCost.repair, this.maintainCost.tech]
          }
        ]
      })

      // 复发率折线图
      this.recurrenceLine = echarts.init(document.getElementById('recurrenceLine'))
      this.recurrenceLine.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['预防性', '故障维修', '技改']
        },
        yAxis: { type: 'value', name: '复发率(%)' },
        series: [
          {
            name: '复发率',
            type: 'line',
            data: [8.2, 15.7, 4.3],
            smooth: true
          }
        ]
      })

      // 资源热力图（简化版，实际应使用地图）
      this.resourceHeatmap = echarts.init(document.getElementById('resourceHeatmap'))
      this.resourceHeatmap.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'item' },
        visualMap: {
          min: 0,
          max: 100,
          orient: 'horizontal',
          left: 'center',
          bottom: '10%'
        },
        series: [
          {
            name: '工单密度',
            type: 'heatmap',
            data: [
              [0, 0, 60], [0, 1, 40], [0, 2, 80],
              [1, 0, 30], [1, 1, 70], [1, 2, 50],
              [2, 0, 50], [2, 1, 20], [2, 2, 90]
            ],
            label: { show: true },
            emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
          }
        ]
      })
    },
    simulateStrategy() {
      // TODO: 对接后端策略模拟接口
      // 示例接口：/api/statAnalysis/strategySimulate
      // 模拟返回数据
      const faultData = [25, 20, 15, 12, 10, 8]
      const costData = [300, 350, 400, 450, 500, 550]

      if (!this.faultPredict) {
        this.faultPredict = echarts.init(document.getElementById('faultPredict'))
      }
      this.faultPredict.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: { type: 'value', name: '故障次数' },
        series: [
          {
            name: '预测故障次数',
            type: 'line',
            data: faultData,
            smooth: true
          }
        ]
      })

      if (!this.costPredict) {
        this.costPredict = echarts.init(document.getElementById('costPredict'))
      }
      this.costPredict.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: { type: 'value', name: '维护成本(万元)' },
        series: [
          {
            name: '预测维护成本',
            type: 'line',
            data: costData,
            smooth: true
          }
        ]
      })

      Message.success('策略模拟完成')
    }
  },
  beforeDestroy() {
    if (this.maintainBar) this.maintainBar.dispose()
    if (this.recurrenceLine) this.recurrenceLine.dispose()
    if (this.resourceHeatmap) this.resourceHeatmap.dispose()
    if (this.faultPredict) this.faultPredict.dispose()
    if (this.costPredict) this.costPredict.dispose()
  }
}
</script>

<style scoped>
.maintain-analysis-container {
  padding: 20px;
}
.stat-card {
  height: 100%;
}
.maintain-cost-desc, .recurrence-desc {
  text-align: center;
  margin-top: 10px;
  color: #666;
}
</style>